﻿<UserControl x:Class="Songhay.BiggestBox.Desktop.Modules.KennyYoungFluidMove.Views.KennyYoungFluidMoveView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:eic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
    xmlns:eil="clr-namespace:Microsoft.Expression.Interactivity.Layout;assembly=Microsoft.Expression.Interactions"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:rxSharedModels="clr-namespace:Songhay.BiggestBox.Portable.Shared.Models;assembly=Songhay.BiggestBox.Portable.Shared"
    d:DesignWidth="{x:Static rxSharedModels:AppScalars.ModuleWidth}" d:DesignHeight="{x:Static rxSharedModels:AppScalars.ModuleHeight}">
    <UserControl.Resources>
        <Style x:Key="ListBoxItemStyle" TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource {x:Type ListBoxItem}}">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="Padding" Value="3"/>
            <Setter Property="VerticalContentAlignment" Value="Top"/>
        </Style>

        <DataTemplate x:Key="ItemTemplateLike">
            <Grid>
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseLeftButtonDown">
                        <eic:ChangePropertyAction
                            TargetObject="{Binding Mode=OneWay}"
                            PropertyName="IsLiked"
                            Value="False"
                            />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
                <TextBlock
                    FontSize="14"
                    Foreground="#FFF0F0F0"
                    Margin="5,0,0,0"
                    Text="{Binding Name}"
                    />
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="ItemTemplateDislike">
            <Grid>
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseLeftButtonDown">
                        <eic:ChangePropertyAction
                            TargetObject="{Binding Mode=OneWay}"
                            PropertyName="IsLiked"
                            Value="True"
                            />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
                <TextBlock
                    FontSize="14"
                    Foreground="#FFF0F0F0"
                    Margin="5,0,0,0"
                    Text="{Binding Name}"
                    />
            </Grid>
        </DataTemplate>

        <ItemsPanelTemplate x:Key="ItemsPanelTemplate">
            <StackPanel>
                <i:Interaction.Behaviors>
                    <eil:FluidMoveBehavior
                        AppliesTo="Children"
                        Duration="0:0:1"
                        Tag="DataContext">
                        <eil:FluidMoveBehavior.EaseY>
                            <BackEase EasingMode="EaseInOut" Amplitude="0.5"/>
                        </eil:FluidMoveBehavior.EaseY>
                        <eil:FluidMoveBehavior.EaseX>
                            <BackEase EasingMode="EaseInOut" Amplitude="0.5"/>
                        </eil:FluidMoveBehavior.EaseX>
                    </eil:FluidMoveBehavior>
                </i:Interaction.Behaviors>
            </StackPanel>
        </ItemsPanelTemplate>

        <DataTemplate x:Key="FoodModelItemTemplate">
            <StackPanel>
                <CheckBox IsChecked="{Binding IsLiked, Mode=TwoWay}"/>
                <TextBlock Text="{Binding Name}"/>
                <TextBlock Text="{Binding Order}"/>
            </StackPanel>
        </DataTemplate>

    </UserControl.Resources>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.5*"/>
            <ColumnDefinition Width="0.5*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="0.10*"/>
            <RowDefinition Height="0.90*"/>
        </Grid.RowDefinitions>
        <TextBlock Grid.ColumnSpan="2"
            Margin="20,9,0,0"
            Style="{StaticResource H1Style}"
            Text="Kenny Young, FluidMoveBehavior and ListBox"
            VerticalAlignment="Top" Grid.RowSpan="2"
            />
        <ListBox Grid.Column="0" Grid.Row="1"
            Background="#FF333333"
            ItemContainerStyle="{StaticResource ListBoxItemStyle}"
            ItemTemplate="{StaticResource ItemTemplateLike}"
            ItemsPanel="{StaticResource ItemsPanelTemplate}"
            ItemsSource="{Binding FoodsILike}"
            />
        <ListBox Grid.Column="1" Grid.Row="1"
            Background="#FF333333"
            ItemContainerStyle="{StaticResource ListBoxItemStyle}"
            ItemTemplate="{StaticResource ItemTemplateDislike}"
            ItemsPanel="{StaticResource ItemsPanelTemplate}"
            ItemsSource="{Binding FoodsIHate}"
            />
        <CheckBox Grid.Column="0" Grid.Row="1"
            Content="Alphabetical"
            Foreground="#FFCACACA"
            Height="18"
            Margin="40,0,20,24"
            VerticalAlignment="Bottom">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Checked">
                    <eic:CallMethodAction
                        MethodName="SortAlphabetical"
                        TargetObject="{Binding Mode=OneWay}"
                        />
                </i:EventTrigger>
                <i:EventTrigger EventName="Unchecked">
                    <eic:CallMethodAction
                        MethodName="SortOriginal"
                        TargetObject="{Binding Mode=OneWay}"
                        />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </CheckBox>
        <Slider Grid.Column="1" Grid.Row="1"
            Margin="20,0,40,24"
            Maximum="{Binding MaxNumberOfItems}"
            SmallChange="1"
            Value="{Binding NumberOfItems, Mode=TwoWay}"
            VerticalAlignment="Bottom"
            />
    </Grid>
</UserControl>
